<template>
  <div>
    <nav-bar>
      <img
        src="../../assets/img/navbar/ic_title_close.png"
        slot="left"
        class="left"
        alt=""
        @click="$router.back()"
      />
      <div slot="center" class="center">
        <span
          v-for="(title, id) in titles"
          :key="id"
          :class="[currentTitle === id ? 'title_active' : '']"
          @click="itemClick(id)"
        >
          {{ title }}</span
        >
      </div>
      <img
        @click="show = true"
        src="../../assets/img/navbar/ic_header_preparation.png"
        slot="right"
        class="right"
        alt=""
      />
    </nav-bar>
    <div class="content_box" ref="viewhome">
      <div v-if="currentTitle === 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <registration-detail
            :list="list"
            @register-click="registerClick"
            @register-search="registerSearch"
          />
        </van-list>
      </div>
      <div v-else-if="currentTitle === 1">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
          <recharge-detail
            :list="list"
            @recharge-search="rechargeSearch"
          />
        </van-list>
      </div>
      <summary-detail :list="list" v-else-if="currentTitle === 2" />
      <back-top :scrollTop="scTop" @back-top="backTop"/>
    </div>
    <screen-date
      :show="show"
      :begintime="begintime"
      :endtime="endtime"
      @show-click="showClick"
      @start-click="startClick"
      @end-click="endClick"
      @reset-date="resetDate"
      @choice-time="choiceTime"
      @sure-search="sureSearch"
    />
    <van-popup v-model="isDateShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        class="date-picker"
      />
    </van-popup>
    <register-popup
      :registerShow="registerShow"
      :userInfo="userInfo"
      @register-close="registerClose"
    />
    <recharge-search
      :rechargeSearchShow="rechargeSearchShow"
      @recharge-search-close="rechargeSearchClose"
      @search-game="searchGame"
      @search-user="searchUser"
    />
    <register-search
      :registerSearchShow="registerSearchShow"
      @register-search-close="registerSearchClose"
      @search-btn="searchBtn"
    />
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import RechargeDetail from "./childComps/RechargeDetail.vue";
import RegistrationDetail from "./childComps/RegistrationDetail.vue";
import SummaryDetail from "./childComps/SummaryDetail.vue";
import ScreenDate from "../../components/common/screen/ScreenDate.vue";
import RegisterPopup from "./childComps/RegisterPopup.vue";
import RechargeSearch from "./childComps/RechargeSearch.vue";
import RegisterSearch from "./childComps/RegisterSearch.vue";
import { getRegisterDetail, getRegisterList } from "../../network/home";
import BackTop from '../../components/common/backTop/BackTop.vue';
import mixinBackTop from '../../mixins/common'

export default {
  name: 'DataManagement',
  mixins: [mixinBackTop],
  components: {
    NavBar,
    RegistrationDetail,
    RechargeDetail,
    SummaryDetail,
    ScreenDate,
    RegisterPopup,
    RechargeSearch,
    RegisterSearch,
    BackTop,
  },
  data() {
    return {
      show: false,
      titles: ["注册明细", "充值明细", "汇总"],
      currentTitle: 0,
      isDateShow: false,
      registerShow: false,
      rechargeSearchShow: false,
      registerSearchShow: false,
      begintime: "",
      endtime: "",
      currentPicker: null,
      datetype: 3,
      url: "/register_list", //默认请求地址
      list: [],
      userInfo: {},
      loading: true,
      finished: false,
      page: 1,
      username: '',
      gamename: '',
      scrollTop: '',
    };
  },
  //在页面离开时记录滚动位置
  beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.querySelector('.content_box').scrollTop
    console.log(this.scrollTop)
    next()
  },
  activated() {
    const top = document.querySelector('.content_box')
    top.scrollTo(0, this.scrollTop);
  },
  created() {
    this.getRegister()
  },
  methods: {
    getRegister() {
      this.finished = false;
      getRegisterList(
        this.url,
        this.datetype,
        this.begintime,
        this.endtime,
        this.page,
        this.username,
        this.gamename,
      ).then((res) => {
        // this.loading = false
        if (res.state === "ok") {
          if(this.currentTitle === 1) {
            console.log(res);
            
            this.loading = false
            if(res.data === null) {
              this.finished = true
            }else {
              this.list = [...this.list, ...res.data]
            }
          }else {
            console.log(res);
            
            this.loading = false
            if(res.data.list === null) {
              this.finished = true
            }else {
              this.list = [...this.list, ...res.data.list]
            }
          }
        } else if (res.msg === "no_login") {
          this.$router.replace("/login");
        }
      });
    },
    searchBtn(val) {
      this.list = []
      this.page = 1
      this.gamename = ''
      this.username = val
      this.registerSearchShow = false
      this.getRegister()
    },
    searchGame(val) {
      this.list = []
      this.page = 1
      this.username = ''
      this.gamename = val
      this.rechargeSearchShow = false
      this.getRegister()
    },
    searchUser(val) {
      this.list = []
      this.page = 1
      this.username = val
      this.rechargeSearchShow = false
      this.getRegister()
    },
    onLoad() {
      this.page ++
      this.getRegister()
    },
    itemClick(id) {
      //当前页面
      this.list = []
      this.page = 1
      this.datetype = 3;
      this.currentTitle = id;
      if (id === 0) {
        this.url = "/register_list";
      } else if (id === 1) {
        this.url = "/pay_list";
      } else if (id === 2) {
        this.url = "/stat_data";
      }
      this.getRegister();
    },
    sureSearch() {
      //确定筛选
      this.list = []
      this.page = 1
      this.show = false;
      this.begintime = "";
      this.endtime = "";
      this.getRegister();
    },
    showClick() {
      //关闭筛选框
      this.show = false;
    },
    startClick() {
      //选择开始框
      this.show = false;
      this.isDateShow = true;
      this.curentPicker = 0;
      this.datetype = 5;
    },
    endClick() {
      //选择结束框
      this.show = false;
      this.isDateShow = true;
      this.curentPicker = 1;
      this.datetype = 5;
    },
    onConfirm(value) {
      //确定
      if (this.curentPicker === 0) {
        this.begintime = value;
      } else if (this.curentPicker === 1) {
        this.endtime = value;
      }
      this.isDateShow = false;
      this.show = true;
    },
    onChange(picker, value, index) {},
    onCancel() {
      //取消
      this.isDateShow = false;
      this.show = true;
    },
    resetDate() {
      //重置按钮
      // console.log(1);
      this.datetype = 2;
      this.begintime = "";
      this.endtime = "";
    },
    registerClick(index) {
      //详情弹框打开
      getRegisterDetail(this.list[index].uid).then((res) => {
        if (res.state === "ok") {
          this.userInfo = res.data;
        } else if (res.msg === "no_login") {
          this.$router.replace("/login");
        }
      });
      this.registerShow = true;
    },
    registerClose() {
      //详情弹框关闭
      this.registerShow = false;
    },
    rechargeSearch() {
      //打开充值明细的搜索
      this.rechargeSearchShow = true;
    },
    rechargeSearchClose() {
      //关闭充值明细的搜索
      this.rechargeSearchShow = false;
    },
    registerSearch() {
      //打开注册明细的搜索
      this.registerSearchShow = true;
    },
    registerSearchClose() {
      //关闭注册明细的搜索
      this.registerSearchShow = false;
    },
    choiceTime(time) {
      this.datetype = time;
    },
    beforeDays(num) {
      // 设置日期，当前日期的前num天
      let myDate = new Date(); // 获取今天日期
      myDate.setDate(myDate.getDate() - (num - 1));
      let dateArray = [];
      let myMonth = myDate.getMonth() + 1;
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = "0" + myMonth;
      }
      let myDates = myDate.getDate();
      if (myDates >= 0 && myDates <= 9) {
        myDates = "0" + myDates;
      }
      let dateTemp;
      let flag = 1;
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + "-" + myMonth + "-" + myDates;
        dateArray.push(dateTemp);
        myDate.setDate(myDate.getDate() + flag);
      }
      return dateArray[0];
    },
  },
  computed: {
    columns() {
      const newArr = [];
      for (let i = 1; i <= 90; i++) {
        newArr.push(this.beforeDays(i));
      }
      return newArr;
    },
  },
};
</script>

    
<style scoped>
.left,
.right {
  width: 44px;
  height: 44px;
}

.content_box {
  width: 750px;
  margin-top: 88px;
  margin-left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

.center {
  color: #666;
}

.center span {
  box-sizing: border-box;
  display: inline-block;
  height: 88px;
  margin: 0 20px;
  font-weight: 450;
}

.title_active {
  color: #333;
  border-bottom: 6px solid #344ede;
}

.date-picker {
  background: #fff;
}
</style>